import React from 'react'
import { User } from './search-panel'
import { Dropdown, MenuProps, Table, TableProps } from 'antd'
import dayjs from 'dayjs'
// react-router 和 react-router-dom的关系，类似与 react 和 react-dom/react-native/react-vr...
import { Link } from 'react-router-dom'
import { Pin } from 'components/pin'
import { useEditProject } from 'utils/project'
import { ButtonNoPadding } from 'components/lib'
import { useProjectModal } from './util'

export interface Project {
  id: number,
  name: string,
  personId: number,
  pin: boolean,
  organization: string,
  created: number,
}

interface ListProps extends TableProps<Project> {
  users: User[],
  refresh?: () => void,
}

export function List({ users, ...props }: ListProps) {
  const {mutate} = useEditProject()
  const {open} = useProjectModal()

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <ButtonNoPadding type='link' onClick={open}>编辑项目</ButtonNoPadding>
      ),
    },
  ]

  return (
    <Table rowKey='id' pagination={false} columns={[{
      title: <Pin checked={true} disabled={true}/>,
      render(value, project) {
        return <Pin checked={project.pin} onCheckedChange={(pin) => {
          mutate({id: project.id, pin}).then(props.refresh)
        }}/>
      }
    }, {
      title: '名称',
      sorter: (a, b) => a.name.localeCompare(b.name),
      render(value, project) {
        return <Link to={String(project.id)}>{project.name}</Link>
      }
    }, {
      title: '部门',
      dataIndex: 'organization',
    }, {
      title: '负责人',
      render(value, project) {
        return (<span>
          {users.find(user => user.id === project.personId)?.name || '未知'}
        </span>)
      }
    }, {
      title: '创建时间',
      render(value, project) {
        return (<span>
          {project.created ? dayjs(project.created).format('YYYY-MM-DD') : '无'}
        </span>)
      }
    }, {
      render(value, project) {
        return (
          <Dropdown menu={{ items }}>
            <ButtonNoPadding type='link'>...</ButtonNoPadding>
          </Dropdown>
        )
      }
    }]}
    {...props}
    >
    </Table>
  )
}
